<template>
  <div class="productDetail">
     <el-card class="form-conainer">

      <el-steps :active="active" finish-status="success" align-center >
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品促销"></el-step>
          <el-step title="填写商品属性"></el-step>
      </el-steps>
 
     </el-card>

  <el-card class="form-container"> 
      <productInfoDetail v-show="showStatus[0]" v-model="productObj" @nextStep="nextStep" :is-update = 'isUpdate'></productInfoDetail>
      <productSaleDetail v-show="showStatus[1]" v-model="productObj" @nextStep="nextStep" :is-update = 'isUpdate' @prevStep="prevStep"></productSaleDetail>
      <productAttrDetail v-show="showStatus[2]" v-model="productObj" @nextStep="prevStep" :is-update = 'isUpdate' @finishComit="finishComit"></productAttrDetail>
  </el-card>
 
  </div>
</template>

<script>
  import productInfoDetail from './productInfoDetail'
  import productSaleDetail from './productSaleDetail'
  import productAttrDetail from './productAttrDetail'

  import {addProduct,getProducById,editProducById} from '@/api/productApi'
 
  const defaultProductObj = {
        productCategoryId: null,
        productCategoryName: '',
        name:"",  // 商品名称
        subTitle:'', 
        productIntro:'', // 商品介绍
        productSn:'', // 商品货号
        originalPrice:null, // 市场价
        price: null, // 商品价格
        store: null ,
        sort: null ,

        // sall 
        giftScore: null,
        giftGrow:null,
        publishStatus:1, // 是否上架
        newsStatus:1,
        recommendStatus:1,
        serviceIds:'', // 服务列表 
        netContent:'',  // 净含量
        storageCondition:'', // 储存条件
        quality:'',    // 保质期
        reductionType:3,   // 优惠选项
        reductionPrice: null, // 促销价格
        reductionStartTime: null, // 特惠开始时间
        reductionEndTime: null,   // 特惠结束时间
        memberPriceList:[
          {
            memberLevelId:1,
            memberLevelName:'黄金会员',
            memberLevelPrice: null
          },
           {
            memberLevelId:2,
            memberLevelName:'白金会员',
            memberLevelPrice: null
          },
           {
            memberLevelId:3,
            memberLevelName:'钻石会员',
            memberLevelPrice: null
          }
        ],
        // 首页秒杀
        productHomeKillList:[
          {
            count:null,
            discount: null
          }
        ],

        // Attr
        // 商品主图片
        pic:'',
        albumPics:'',
        // 详情页
        detailHtml:''
  }

  export default {
    name: 'productDetail',
    data(){
      return {
        active:0,
        showStatus:[true,false,false],
        // 商品参数
        productObj: Object.assign({},defaultProductObj)
      }
    },
    props:{
      // 判断是编辑 还是添加
      isUpdate:{
        type:Boolean,
        default:false
      }
    },
    components:{
      productInfoDetail,
      productSaleDetail,
      productAttrDetail
    }, 
    async created(){
      if(this.isUpdate){ // 编辑
        let res = await getProducById(this.$route.query.id)
        if(res.status === 1){
          // console.log(res)
          let temPorductObj = res.data 
          // 特殊处理 会员价格 和 首页秒杀
          if(temPorductObj.memberPriceList.length === 0){
            temPorductObj.memberPriceList = defaultProductObj.memberPriceList
          } 
          if(temPorductObj.productHomeKillList.length === 0){
            temPorductObj.productHomeKillList = defaultProductObj.productHomeKillList
          }
  
          this.productObj = temPorductObj 
          console.log(this.productObj);
          
        }else{
          this.$message.error(res.msg)
        } 
      }
 
 
    },
    methods:{
      hideAll(){
        for(let i=0;i<this.showStatus.length;i++){
          this.showStatus[i] = false
        }
      },
      // 上一步
      prevStep(){
        if(this.active > 0 && this.active < this.showStatus.length){
            this.active--;
            this.hideAll();
            this.showStatus[this.active] = true;
        }
      },
      // 下一步
      nextStep(){ 
        if(this.active < this.showStatus.length-1 ){
          this.active++;
          this.hideAll();
          this.showStatus[this.active] = true;
        }
      },
      // 提交
      finishComit(isUpdate){
        
        this.$confirm('是否创建一个新的商品','提示',{
          type:'warning'
        }).then(()=>{ 
          if(isUpdate){ // 编辑
            editProducById(this.productObj).then((res)=>{
              if(res && res.status == 1){
                this.$message.success(res.msg)
                this.$router.push('/pm/product')
              }else{
                this.$message.error(res.msg)
              }
            })
             
          }else{ // 添加
            addProduct(this.productObj).then((res)=>{
            //  console.log(res);
            if(res && res.status == 1){
              this.$message.success(res.msg)
              this.$router.push('/pm/product')
            }else{
              this.$message.error(res.msg)
            }
           })
          }
        
        }).catch((err)=>{
          console.log(err);
        })
      }

    }
  }
</script>

<style lang="less" scoped>
.product{
  width: 100%; ; 
}
</style>
